<html>

<head>
  <meta charset="utf8">
  <title>3D in canvas</title>
  <link type="text/css" href="../../resources/webgl-tutorials.css" rel="stylesheet" />
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <div id="info">
    <a href="https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-2d-vs-3d-library.html" target="_blank">WebGL -
      光栅化 vs 三维库</a>
  </div>
  <h1 class="description">3D in canvas</h1>
  <p><canvas id="c"></canvas></p>
  <p class="description"><a href="3d-in-webgl.html">compare to 3D in WebGL</a></p>
</body>
<!-- this is included only for iframe and requestAnimationFrame support -->
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See http://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
and http://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<script src="../../resources/webgl-utils.js"></script>
<script src="../../resources/webgl-lessons-helper.js"></script>
<!-- you can and should delete this script. it is only used on the site to help with errors -->
<script src="../../resources/m4.js"></script>
<script>
  "use strict";

  function main() {
    var cubeVertices = [
      -1, -1, -1,
      1, -1, -1,
      1, 1, -1,
      -1, 1, -1,
      -1, -1, 1,
      1, -1, 1,
      1, 1, 1,
      -1, 1, 1,
    ];
    var indices = [
      0, 1,
      1, 2,
      2, 3,
      3, 0,
      4, 5,
      5, 6,
      6, 7,
      7, 4,
      0, 4,
      1, 5,
      2, 6,
      3, 7,
    ];

    var canvas = document.getElementById("c");
    var ctx = canvas.getContext("2d");
    var then = 0;

    function render(clock) {
      clock *= 0.001;

      var scale = 2;

      webglUtils.resizeCanvasToDisplaySize(ctx.canvas, window.devicePixelRatio);
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
      ctx.save();
      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.scale(canvas.width / scale, canvas.height / scale);
      ctx.lineWidth = scale / canvas.width;
      ctx.strokeStyle = "black";

      var fieldOfView = Math.PI * 0.25;
      var aspect = canvas.clientWidth / canvas.clientHeight;
      var projection = m4.perspective(fieldOfView, aspect, 1, 500);
      var radius = 5;
      var eye = [
        Math.sin(clock) * radius,
        -2,
        Math.cos(clock) * radius];
      var target = [0, 0, 0];
      var up = [0, 1, 0];
      var camera = m4.lookAt(eye, target, up);
      var view = m4.inverse(camera);

      var worldViewProjection = m4.multiply(projection, view);

      drawLines(cubeVertices, indices, worldViewProjection);
      ctx.restore();
      requestAnimationFrame(render);
    }
    requestAnimationFrame(render);

    function drawLines(cubeVertices, indices, worldViewProjection) {
      ctx.beginPath();
      // transform points
      var points = [];
      for (var ii = 0; ii < cubeVertices.length; ii += 3) {
        points.push(m4.transformPoint(
          worldViewProjection,
          [cubeVertices[ii + 0], cubeVertices[ii + 1], cubeVertices[ii + 2]]));
      }
      for (var ii = 0; ii < indices.length; ii += 2) {
        var p0 = points[indices[ii + 0]];
        var p1 = points[indices[ii + 1]];
        ctx.moveTo(p0[0], p0[1]);
        ctx.lineTo(p1[0], p1[1]);
      }
      ctx.stroke();
    }
  }

  main();
</script>

</html>